<style scoped="scoped">
	.Detail{
		width: 880px;
		height: 180px;
		margin: 20px auto;
		-webkit-box-shadow: 2px 2px 20px #b8afaf;
   		box-shadow: 2px 2px 20px #b8afaf;
   		border-radius: 4px;
	}
	.left{
		width: 675px;
		height: 100%;
		box-sizing: border-box;
		border-right: solid 1px #00000030;
		float: left;
		    padding: 0 25px 0 10px;
		    position: relative;
	}
	.right{
		width: 205px;
		margin-left: 675px;
		height: 100%;
		position: relative;
	}
	.left p{
		letter-spacing: 1px;
		font-size: 14px;
   		color: #a59f9f;
		height: 33px;
    	line-height: 33px;
	}
	.name{
		font-size: 17px;
		color: #000000;
	}
	.left p .payType{
		color: #a59f9f;
		float: right;
	}
	.first{
		 margin-top: 10px;
	}
	.left p span{
		vertical-align: top;
		    margin-left: 15px;
		    color: #000000;
	}
	.left p .title{
		width: 90px;
		display: inline-block;
		text-align:justify;
		color: #a59f9f;
	}
	i{display:inline-block;width:100%;height:0;}
	.money{
		 font-size: 33px;
    color: rgb(196,54,51);
    position: absolute;
	    bottom: 5px;
    right: 25px;
	}
	.check_in{
		margin: auto;
	    width: 120px;
	    height: 35px;
	    background: rgb(214,112,2);
	    display: inline-block;
	    text-align: center;
	    color: #fff;
	    border-radius: 31px;
	    font-size: 16px;
	    line-height: 35px;
	    position: absolute;
	    top: 0;
	    right: 0;
	    left: 0;
	    bottom: 0;
	    cursor: pointer;
	}
	   
	
</style>

<template>
	<section class="orderDetail">
		<common-head></common-head>
		<div class="Detail">
			<div class="left">
				<p class="first"><span class="name">{{detail.name}}</span><span class="payType">{{detail.payType}}</span></p>
				<p class="second"><span class="title">房型<i></i></span><span>{{detail.homeType}}</span></p>
				<p class="third"><span class="title">入住日期<i></i></span><span>{{detail.inDate}}</span>&nbsp;&nbsp;至<span>{{detail.outData}}</span> <span>共{{jiange}}晚</span></p>
				<p class="four"><span class="title">入住人姓名<i></i></span><span>{{detail.customerName}}</span></p>
				<p class="five"><span class="title">联系人手机<i></i></span><span>{{detail.customerPhone}}</span></p>
				<span class="money">￥{{detail.money}}</span>
			</div>
			
			<div class="right">
				<span class="check_in" @click="checkIn">登记入住</span>
			</div>
			
		</div>
	</section>
</template>

<script>
	import commonHead from "@/components/head"
	export default{
		components:{
			commonHead
		},
		data(){
			return{
				detail:{
					name:'远洋宾馆',
					payType:'待付款',
					homeType:'舒适双人房',
					inDate:'2018-09-20',
					outData:'2018-09-21',
					customerName:'潘毅一，王一梅',
					customerPhone:'137093946054',
					money:'299',
				},
				jiange:"1",
			}
		},
		methods:{
			checkIn(){/*登记入住*/
				this.$router.push({name:'checkIn'})
			}
		}
	}
</script>

